import { registrationInfoInit } from '@/services/api/api-interview-record';
import { AudioOutlined, DownloadOutlined, UserOutlined } from '@ant-design/icons';
import {
    DrawerForm, ProCard,
    ProFormInstance
} from '@ant-design/pro-components';
import { Alert, Card, Descriptions, Empty, Spin, Upload, UploadFile } from 'antd';
import { useEffect, useRef, useState } from 'react';
interface RegistrationInfoProps {
    // detail: InterviewRecordData.RegistrationInfo
    id: string;
    reload: boolean
}
const RegistrationInfo: React.FC<RegistrationInfoProps> = ({ id, reload }) => {
    const formRef = useRef<ProFormInstance>();
    const [modalFormOpen, setModalFormOpenState] = useState<boolean>(false);
    const [tab, setTab] = useState('media');
    const [registrationInfo, setRegistrationInfo] = useState<InterviewRecordData.RegistrationInfo>({} as InterviewRecordData.RegistrationInfo)

    const [previewOpen, setPreviewOpen] = useState(false);
    const [previewData, setPreviewData] = useState<{
        id: string;
        name: string;
        mimeType: string;
        url?: string;
    }>();
    const [previewOnlineUrl, setPreviewOnlineUrl] = useState<string>();
    const [previewLoading, setPreviewLoading] = useState(true);
    const iframeRef = useRef(null);

    const getRegistrationInfo = async () => {
        const res = await registrationInfoInit({ recordId: id })
        if (res.code === 0) {
            if (res.data.length > 0) {
                console.log('ddddddddddd');

                setRegistrationInfo(res.data[0])
            } else {
                setRegistrationInfo([])
            }

        }
        console.log(res);
    }
    useEffect(() => {
        getRegistrationInfo()
    }, [reload])
    return (
        <>
            {/* <DrawerForm
                trigger={<a>点击查看</a>}
                title="报名信息"
                formRef={formRef}
                autoFocusFirstInput
                drawerProps={{
                    maskClosable: true,
                    destroyOnClose: true,
                    width: '30%',
                }}
                open={modalFormOpen}
                onOpenChange={(visible) => {
                    if (visible) {
                        getRegistrationInfo()
                    }
                    setModalFormOpenState(visible)
                }}
                submitTimeout={2000}
                submitter={false}

            > */}
            <Spin
                style={{
                    textAlign: 'center',
                }}
                spinning={registrationInfo === undefined}
            >
                <ProCard
                    style={{ marginTop: -20 }}
                    tabs={{
                        activeKey: tab,
                        items: [
                            {
                                label: <span ><AudioOutlined style={{ marginRight: 5 }} />媒体信息</span>,
                                key: 'media',
                            },
                            {
                                label: <span ><UserOutlined style={{ marginRight: 5 }} />采访对象</span>,
                                key: 'organization',
                            },
                        ],
                        onChange: (key) => {
                            setTab(key);
                        },
                    }}
                />
                {tab === 'media' && <div style={{ marginTop: -20 }}>
                    {registrationInfo?.mediaList?.map((item) =>
                        <ProCard bordered headerBordered collapsible defaultCollapsed title={item?.mediaName} style={{ marginBottom: 10 }} >
                            <Descriptions column={2}>
                                {item.reporterList.map((item1) => <>
                                    <Descriptions.Item label="记者">
                                        {item1?.name}
                                    </Descriptions.Item>
                                    <Descriptions.Item label="电话">
                                        {item1?.phone}
                                    </Descriptions.Item></>
                                )}
                            </Descriptions>
                        </ProCard>
                    )}
                    {(Array.isArray(registrationInfo?.mediaList) && registrationInfo?.mediaList.length > 0) ? <></> : <Card bordered title={<><AudioOutlined style={{ marginRight: 5 }} />媒体信息</>}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></Card>}
                </div>}
                {tab === 'organization' && <div style={{ marginTop: -20 }}>
                    {registrationInfo?.assignOrganizationList?.map((item) =>
                        <>
                            <ProCard bordered headerBordered collapsible defaultCollapsed title={item?.organizationName} style={{ marginBottom: 10 }}>
                                <Descriptions column={2} >
                                    {item?.organizationList?.map((item) => <>
                                        <Descriptions.Item label="联络人">
                                            {item?.name}
                                        </Descriptions.Item>
                                        <Descriptions.Item label="电话">
                                            {item?.phone}
                                        </Descriptions.Item>

                                    </>
                                    )}

                                </Descriptions>
                                {item?.attachments && item?.attachments.length > 0 && <div style={{ marginBlock: 10 }}>
                                    <span style={{ color: '#8c8c8c' }}>相关素材:</span>
                                    <>
                                        <Upload
                                            listType="picture"
                                            multiple
                                            fileList={item?.attachments.map((item) => {
                                                return {
                                                    uid: item.id,
                                                    name: item.name,
                                                    url: item.content,
                                                    mimeType: item.mimeType,
                                                    status: 'done',
                                                };
                                            })}
                                            showUploadList={{
                                                downloadIcon: (
                                                    <div style={{ marginLeft: '-100px', padding: '17px 0', marginTop: '-15px' }}>
                                                        <DownloadOutlined
                                                            style={{
                                                                marginRight: '10px',
                                                            }}
                                                        />
                                                        点击下载
                                                    </div>
                                                ),
                                                showRemoveIcon: false,
                                                showDownloadIcon: true,
                                            }}
                                            onPreview={async (file: UploadFile) => {
                                                setPreviewData({
                                                    id: file.uid,
                                                    name: file.name,
                                                    mimeType: file.mimeType,
                                                    url: encodeURI(file.url),
                                                });
                                                setPreviewOpen(true);
                                            }}
                                        />
                                        <DrawerForm
                                            title={previewData?.name}
                                            drawerProps={{
                                                width: 900,
                                                destroyOnClose: true,
                                            }}
                                            open={previewOpen}
                                            onOpenChange={async (visible) => {
                                                if (visible) {
                                                    if (
                                                        previewData?.mimeType !== null &&
                                                        previewData?.mimeType?.indexOf('image') > -1
                                                    ) {
                                                        //图片预览
                                                    } else {
                                                        setPreviewLoading(true);

                                                        // const response = await cuesAttachmentPreview({
                                                        //     id: previewData?.id,
                                                        // });

                                                        // if (response.code === 0) {
                                                        //     setPreviewOnlineUrl(response.data);
                                                        // } else {
                                                        //     message.error('暂时无法预览');
                                                        //     setPreviewLoading(false);
                                                        // }
                                                    }
                                                } else {
                                                    setPreviewOpen(false);
                                                    setPreviewData(undefined);
                                                    setPreviewOnlineUrl(undefined);
                                                }
                                            }}
                                            submitter={{
                                                searchConfig: {
                                                    submitText: '下载',
                                                },
                                            }}
                                            onFinish={async (values) => {
                                                window.open(previewData?.url, '_blank');
                                            }}
                                        >
                                            <Alert
                                                style={{
                                                    marginBottom: 20,
                                                }}
                                                message="部分文件系统可能暂不支持在线预览，建议下载到本地"
                                                type="warning"
                                                showIcon
                                            />
                                            {previewData?.mimeType !== null &&
                                                previewData?.mimeType?.indexOf('image') > -1 ? (
                                                <Image width="100%" src={previewData?.url} />
                                            ) : (
                                                <Spin spinning={previewLoading}>
                                                    <iframe
                                                        ref={iframeRef}
                                                        src={previewOnlineUrl}
                                                        height={200}
                                                        width="100%"
                                                        frameBorder="0"
                                                        // scrolling="false"
                                                        allowFullScreen={true}
                                                    // scrolling={'no'}
                                                    />
                                                </Spin>
                                            )}
                                        </DrawerForm>
                                    </>
                                </div>}
                            </ProCard>
                        </>
                    )}
                    {(Array.isArray(registrationInfo?.assignOrganizationList) && registrationInfo?.assignOrganizationList.length > 0) ? <></> : <Card bordered title={<><UserOutlined style={{ marginRight: 5 }} />采访对象</>}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></Card>}
                </div>}

            </Spin>
            {/* </DrawerForm > */}
        </>
    );
};

export default RegistrationInfo;